<template>
  <el-menu
      ref="amenu"
      background-color="#333744"
      text-color="#fff"
      active-text-color="#365cc9"
      :collapse="collapse"
      :collapse-transition=false
      router
      :default-active="defaultactive"
      :unique-opened=true>
      
      <!-- 一级菜单 -->
      <!-- 使用模板字符串 -->
      <el-submenu v-for="item in list" :key="item.id" :index="`${item.id}`" >
        <!-- 一级菜单模板区 -->
          <template slot="title">
            <!-- 图标 -->
            <i :class="iconsObj[item.id]" id="iconfont"></i>
            <!-- 文本 -->
            <span>{{item.authName}}</span>
          </template>
          <!-- 二级菜单开始的地方 -->
          <el-menu-item v-for="i in item.children" :key="i.id" :index="`${i.path}`" @click="saveNavSrare(i.path,item.authName,i.authName)">
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>{{i.authName}}</span>
              </template>
          </el-menu-item>

      </el-submenu>
      
    </el-menu>
</template>

<script>

export default {
name:'homeMenu',
data() {
  return {
    list: {},
    //绑定图标
    iconsObj:{
      '125':'el-icon-s-custom',
      '103':'el-icon-aim',
      '101':'el-icon-shopping-bag-1',
      '102':'el-icon-notebook-2',
      '145':'el-icon-files'
    },
    defaultactive:'',
    name1:sessionStorage.getItem('name1')||'',
    name2:sessionStorage.getItem('name2')||''
  }
},
props: ['collapse'],
mounted(){
  // console.log('collapse的值为',this.collapse);
  this.getMenuList()
  //初始化的时候让子菜单获得一个焦点选项
  this.defaultactive = sessionStorage.getItem('activePath')
},
// created(){
 
// },
methods:{
  getMenuList(){
    this.$http.get('menus').then(
    respose => {//正确请求时执行的代码
      // console.log(respose.data.data);
      this.list = respose.data.data
    },
    error => {//错误时执行的代码
    },
    )
  },
  //保存链接的激活状态
  saveNavSrare(activePath,name1,name2){
    // console.log(activePath);
    sessionStorage.setItem('activePath',activePath)
    this.defaultactive = activePath
    // //将面包屑的值存入
    sessionStorage.setItem('name1',name1)
    sessionStorage.setItem('name2',name2)
    this.getAuthName(sessionStorage.getItem('name1'),sessionStorage.getItem('name2'))
  },
  //给面包屑传值
  getAuthName(name1,name2){this.$bus.$emit('demo',{name1,name2})}
}
}
</script>

<style scoped>
.a{
  color: rgb(27, 11, 202);
}
#iconfont{
  margin-right: 20px;
}
.el-menu {
    border-right: 0;
  }

</style>